<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="navbar-back" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="navbar-action">
				<view class="action-btn" @click="toggleFavorite">
					<text class="iconfont" :class="isFavorite ? 'icon-star-filled' : 'icon-star'"></text>
				</view>
				<view class="action-btn" @click="sharePhotographer">
					<text class="iconfont icon-share"></text>
				</view>
			</view>
		</view>
		
		<!-- 摄影师封面 -->
		<view class="photographer-cover">
			<image :src="photographerInfo.coverImage" mode="aspectFill" class="cover-image"></image>
			<view class="cover-gradient"></view>
			<view class="photographer-info">
				<view class="photographer-name">{{photographerInfo.name}}</view>
				<view class="photographer-desc">{{photographerInfo.description}}</view>
				<view class="photographer-stats">
					<view class="stat-item">
						<text class="iconfont icon-star"></text>
						<text>{{photographerInfo.rating}} ({{photographerInfo.reviewCount}})</text>
					</view>
					<view class="stat-item">
						<text class="iconfont icon-camera"></text>
						<text>{{photographerInfo.orderCount}}次拍摄</text>
					</view>
					<view class="stat-item">
						<text class="iconfont icon-time"></text>
						<text>{{photographerInfo.responseTime}}小时响应</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容区域 -->
		<view class="content-section">
			<!-- 专业服务 -->
			<view class="section-title">专业服务</view>
			<view class="tags">
				<view class="tag" v-for="(tag, index) in photographerInfo.tags" :key="index">
					{{tag}}
				</view>
			</view>
			
			<!-- 作品展示 -->
			<view class="section-title">
				<text>作品展示</text>
				<text class="more" @click="viewAllWorks">查看全部</text>
			</view>
			<view class="portfolio">
				<view class="portfolio-item" v-for="(item, index) in photographerInfo.portfolio" :key="index" @click="previewImage(index)">
					<image :src="item" mode="aspectFill" class="portfolio-image"></image>
				</view>
			</view>
			
			<!-- 服务套餐 -->
			<view class="section-title">服务套餐</view>
			<view class="packages">
				<view 
					class="package-card" 
					v-for="(pkg, index) in photographerInfo.packages" 
					:key="index"
					:class="{ 'active': selectedPackage === index }"
					@click="selectPackage(index)"
				>
					<view class="package-header">
						<view class="package-name">{{pkg.name}}</view>
						<view class="package-price">¥{{pkg.price}}</view>
					</view>
					<view class="package-features">
						<view class="feature-item" v-for="(feature, fIndex) in pkg.features" :key="fIndex">
							<text class="iconfont icon-check"></text>
							<text>{{feature}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 客户评价 -->
			<view class="section-title">
				<text>客户评价</text>
				<text class="more" @click="viewAllReviews">查看全部 {{photographerInfo.reviewCount}}</text>
			</view>
			<view class="reviews">
				<view class="review-card" v-for="(review, index) in photographerInfo.reviews" :key="index">
					<view class="review-header">
						<image :src="review.avatar" mode="aspectFill" class="review-avatar"></image>
						<view class="review-user">
							<view class="review-name">{{review.name}}</view>
							<view class="review-date">{{review.date}}</view>
						</view>
						<view class="review-rating">
							<text class="iconfont icon-star" v-for="n in 5" :key="n" :class="{ 'active': n <= review.rating }"></text>
						</view>
					</view>
					<view class="review-content">{{review.content}}</view>
					<view class="review-images" v-if="review.images && review.images.length > 0">
						<image 
							v-for="(img, imgIndex) in review.images" 
							:key="imgIndex" 
							:src="img" 
							mode="aspectFill" 
							class="review-image"
							@click="previewReviewImage(review.images, imgIndex)"
						></image>
					</view>
				</view>
			</view>
			
			<!-- 预约按钮 -->
			<view class="booking-btn-container">
				<button class="booking-btn" @click="bookNow">立即预约</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				photographerId: null,
				isFavorite: false,
				selectedPackage: 0,
				photographerInfo: {
					id: 1,
					name: '王摄影工作室',
					description: '专业人像摄影师，8年经验',
					coverImage: 'https://img.freepik.com/free-photo/camera-accessories-wooden-table_23-2147828023.jpg',
					avatar: 'https://img.freepik.com/free-photo/side-view-woman-taking-photos_23-2149915463.jpg',
					rating: 4.9,
					reviewCount: 254,
					orderCount: 1580,
					responseTime: 2,
					tags: ['人像摄影', '婚纱照', '儿童摄影', '写真', '生活照', '毕业照'],
					portfolio: [
						'https://img.freepik.com/free-photo/beautiful-woman-with-natural-make-up_23-2149071216.jpg',
						'https://img.freepik.com/free-photo/woman-with-blonde-hair-looking-camera_23-2147768086.jpg',
						'https://img.freepik.com/free-photo/beautiful-woman-with-curly-brown-hair_23-2148614071.jpg',
						'https://img.freepik.com/free-photo/pretty-smiling-woman-with-curly-hair_23-2148029598.jpg',
						'https://img.freepik.com/free-photo/portrait-beautiful-young-woman-standing-grey-wall_231208-10760.jpg',
						'https://img.freepik.com/free-photo/portrait-young-beautiful-hipster-girl-trendy-summer-sundress_158538-17339.jpg',
					],
					packages: [
						{
							name: '基础套餐',
							price: 199,
							features: [
								'1小时拍摄',
								'1套服装',
								'5张精修照片',
								'电子版照片',
								'拍摄地点：工作室'
							]
						},
						{
							name: '高级套餐',
							price: 299,
							features: [
								'2小时拍摄',
								'2套服装',
								'15张精修照片',
								'电子版照片',
								'拍摄地点：工作室/外景'
							]
						},
						{
							name: '豪华套餐',
							price: 499,
							features: [
								'3小时拍摄',
								'3套服装',
								'30张精修照片',
								'电子版照片+精美相册',
								'拍摄地点：自选'
							]
						}
					],
					reviews: [
						{
							name: '张小姐',
							avatar: 'https://img.freepik.com/free-photo/asian-woman-2_1149-2157.jpg',
							date: '2023-04-15',
							rating: 5,
							content: '摄影师很专业，拍出来的照片非常满意！姿势指导也很到位，会再次光顾的。',
							images: [
								'https://img.freepik.com/free-photo/attractive-young-woman-posing-city-centre_1303-13740.jpg',
								'https://img.freepik.com/free-photo/young-woman-with-sunglasses-sitting-stairs-city_1303-13882.jpg'
							]
						},
						{
							name: '李先生',
							avatar: 'https://img.freepik.com/free-photo/asian-businessman_1149-2162.jpg',
							date: '2023-04-03',
							rating: 4,
							content: '照片质量很好，摄影师很耐心。唯一的小缺点是修图时间比预期长了一些。总体还是很推荐的。',
							images: []
						}
					]
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.photographerId = options.id;
				this.loadPhotographerDetail();
			}
		},
		methods: {
			// 加载摄影师详情
			loadPhotographerDetail() {
				// 实际应用中应该发送请求获取摄影师详情
				console.log('加载摄影师详情，ID:', this.photographerId);
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 收藏摄影师
			toggleFavorite() {
				this.isFavorite = !this.isFavorite;
				uni.showToast({
					title: this.isFavorite ? '已收藏' : '已取消收藏',
					icon: 'none'
				});
			},
			
			// 分享摄影师
			sharePhotographer() {
				uni.showToast({
					title: '分享功能开发中',
					icon: 'none'
				});
			},
			
			// 查看全部作品
			viewAllWorks() {
				uni.showToast({
					title: '查看全部作品功能开发中',
					icon: 'none'
				});
			},
			
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.photographerInfo.portfolio
				});
			},
			
			// 选择套餐
			selectPackage(index) {
				this.selectedPackage = index;
			},
			
			// 查看全部评价
			viewAllReviews() {
				uni.showToast({
					title: '查看全部评价功能开发中',
					icon: 'none'
				});
			},
			
			// 预览评价图片
			previewReviewImage(images, index) {
				uni.previewImage({
					current: index,
					urls: images
				});
			},
			
			// 立即预约
			bookNow() {
				const selectedPackage = this.photographerInfo.packages[this.selectedPackage];
				uni.navigateTo({
					url: `/pages/booking/booking?id=${this.photographerId}&package=${this.selectedPackage}&price=${selectedPackage.price}&name=${selectedPackage.name}`
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		max-width: 100%;
		padding: 0;
		overflow-x: hidden;
	}
	
	/* 顶部导航栏 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		background-color: transparent;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		padding: 10px 15px;
		/* #ifdef MP-WEIXIN */
		padding-top: calc(10px + var(--status-bar-height));
		/* #endif */
	}
	
	.navbar-back {
		width: 30px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
	
	.navbar-action {
		display: flex;
		gap: 15px;
	}
	
	.action-btn {
		width: 30px;
		height: 30px;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
	
	/* 摄影师封面 */
	.photographer-cover {
		position: relative;
		height: 60vh;
		overflow: hidden;
	}
	
	.cover-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.cover-gradient {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50%;
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
	}
	
	.photographer-info {
		position: absolute;
		bottom: 20px;
		left: 20px;
		right: 20px;
		color: white;
	}
	
	.photographer-name {
		font-size: 24px;
		font-weight: 600;
		margin-bottom: 5px;
	}
	
	.photographer-desc {
		font-size: 14px;
		margin-bottom: 10px;
		opacity: 0.9;
	}
	
	.photographer-stats {
		display: flex;
		gap: 15px;
		font-size: 13px;
	}
	
	.stat-item {
		display: flex;
		align-items: center;
	}
	
	.stat-item .iconfont {
		margin-right: 5px;
	}
	
	/* 内容区域 */
	.content-section {
		background-color: white;
		border-radius: 12px 12px 0 0;
		margin-top: -20px;
		position: relative;
		padding: 20px;
	}
	
	.section-title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.section-title .more {
		font-size: 14px;
		font-weight: normal;
		color: $light-text;
	}
	
	/* 标签样式 */
	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-bottom: 20px;
	}
	
	.tag {
		padding: 6px 12px;
		background-color: $secondary-color;
		border-radius: 20px;
		font-size: 13px;
		color: $light-text;
	}
	
	/* 作品展示 */
	.portfolio {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 5px;
		margin-bottom: 20px;
	}
	
	.portfolio-item {
		aspect-ratio: 1;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.portfolio-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	/* 服务套餐 */
	.packages {
		margin-bottom: 20px;
	}
	
	.package-card {
		padding: 15px;
		border: 1px solid $border-color;
		border-radius: 8px;
		margin-bottom: 10px;
		transition: all 0.3s;
	}
	
	.package-card.active {
		border-color: $primary-color;
		box-shadow: 0 0 0 1px $primary-color;
	}
	
	.package-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}
	
	.package-name {
		font-weight: 500;
	}
	
	.package-price {
		color: $primary-color;
		font-weight: 500;
	}
	
	.package-features {
		font-size: 13px;
	}
	
	.feature-item {
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}
	
	.feature-item .iconfont {
		color: $primary-color;
		margin-right: 5px;
		font-size: 14px;
	}
	
	/* 客户评价 */
	.reviews {
		margin-bottom: 20px;
	}
	
	.review-card {
		padding: 15px;
		border-bottom: 1px solid $border-color;
	}
	
	.review-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.review-avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 10px;
	}
	
	.review-user {
		flex: 1;
	}
	
	.review-name {
		font-weight: 500;
		font-size: 14px;
	}
	
	.review-date {
		font-size: 12px;
		color: $light-text;
	}
	
	.review-rating {
		color: #ddd;
		font-size: 14px;
	}
	
	.review-rating .iconfont.active {
		color: #ffc300;
	}
	
	.review-content {
		font-size: 14px;
		margin-bottom: 10px;
		line-height: 1.5;
	}
	
	.review-images {
		display: flex;
		gap: 5px;
	}
	
	.review-image {
		width: 80px;
		height: 80px;
		border-radius: 4px;
		object-fit: cover;
	}
	
	/* 预约按钮 */
	.booking-btn-container {
		margin-top: 20px;
		padding-bottom: 30px;
	}
	
	.booking-btn {
		width: 100%;
		height: 45px;
		background-color: $primary-color;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 16px;
		font-weight: 500;
	}
	
	/* iconfont */
	.icon-back:before {
		content: "\e679";
	}
	
	.icon-star:before {
		content: "\e62d";
	}
	
	.icon-star-filled:before {
		content: "\e62e";
	}
	
	.icon-share:before {
		content: "\e60f";
	}
	
	.icon-camera:before {
		content: "\e663";
	}
	
	.icon-time:before {
		content: "\e65f";
	}
	
	.icon-check:before {
		content: "\e600";
	}
</style> 